<template>
  <div>
    <Card class="warp-card" dis-hover>
      <vxe-grid ref="vGrid"
        resizable
        border
        show-overflow
        highlight-hover-row
        row-id="id"
        :loading="loading"
        :form-config="tableForm"
        :toolbar="tableToolbar"
        :columns="tableColumn"
        :pager-config="pagerConfig"
        :sort-config="sortConfig"
        :proxy-config="proxyConfig"
        @toolbar-button-click="buttonClick"
      >
      </vxe-grid>
    </Card>

    <SupplierCategoryTableAdd ref="SupplierCategoryTableAdd" @addSuccess="$refs.vGrid.commitProxy('reload')"></SupplierCategoryTableAdd>>
  </div>
  
</template>

<script>
import { supplierCategoryApi } from '@/api/supplier/supplier-category';
import SupplierCategoryTableAdd from './components/supplier-category-table-add'
export default {
  name: 'SupplierCategoryList',
  components: {
    SupplierCategoryTableAdd
  },
  props: {},
  data() {
    return {
      loading: false,
      // 按钮权限设置
      buttonsPrivles: {
        
      },
      // pagerConfig
      pagerConfig: {
        pageSize: 10,
        pageSizes: [5, 15, 20, 50, 100]
      },
      // column
      tableColumn: [
        {
          type:'seq',
          width: '50'
        },
        {
          title: '分类名称',
          field: 'category'
        },
        {
          title: '描述',
          field: 'categoryDesc'
        },
        {
          title: '创建时间',
          field: 'createTime'
        },
        {
          title: '操作',
          field: 'action',
          width: 160,
          align: 'center',
          className: 'action-hide',
          slots: {
            default: ({row}, h) => {
              return this.$tableAction(h, [
                {
                  title: '编辑',
                  directives: [
                    {
                      name: 'privilege',
                      value: 'supplier-category-update'
                    }
                  ],
                  action: () => {
                    this.editEvent(row);
                  }
                },
                {
                  title: '删除',
                  directives: [
                    {
                      name: 'privilege',
                      value: 'supplier-category-delete'
                    }
                  ],
                  action: () => {
                    this.deleteEvent(row);
                  }
                }
              ]);
            }
          }
        }
      ],
      // search form
      tableForm: {
        titleWidth: 100,
        titleAlign: 'right',
        data: {
          searchCount: true
        },
        items: [ ]
      },
      // 按钮
      tableToolbar: {
        id: 'supplier-category-list-button',
        refresh: true,
        export: false,
        custom: true,
        buttons: [
          { code: 'insert_code', name: '新增', icon: 'fa fa-plus', visible: true }
        ]
      },
      //sortConfig
      sortConfig: {
        remote: true,
        trigger: 'cell'
      },
      //proxyConfig
      proxyConfig: {
        seq: true,
        sort: true,
        form: true,
        props: {
          result: 'data.list',
          total: 'data.total'
        },
        ajax: {
          query: this.findList
        }
      }
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {},
  methods: {
    // 获取数据列表
    findList({ page, sort, form }) {
      // 处理排序条件
      let queryParams = Object.assign({
        pageNum: page.currentPage,
        pageSize: page.pageSize
      }, form);
      if (sort.field !== undefined) {
        queryParams = Object.assign({
          sort: sort.order === 'asc',
          orderByField: sort.field
        }, queryParams);
      }
      return supplierCategoryApi.getList(queryParams);
    },
    // 新增
    insertEvent() {
      this.$refs['SupplierCategoryTableAdd'].showModal();
    },
    editEvent(row) {
        this.$refs['SupplierCategoryTableAdd'].showModal(row);
    },
    // 删除确定
    async deleteSure(delId) {
      this.loading = true;
      let res = await supplierCategoryApi.delete(delId);
      this.$Message.success('删除成功');
      this.loading = false;
      this.findList();
    },
    // 删除操作
    deleteEvent(row) {
      this.$Modal.confirm({
        title: '友情提醒',
        content: '确定要删除吗？',
        onOk: () => {
          this.deleteSure(row.id);
        }
      });
    },
    buttonClick({code}, event) {
      switch (code) {
        case 'insert_code': 
          this.insertEvent();
      }
    }
  }
};
</script>
